<template>
  <div class="home navBar">
	<div class="home_top">
		<div class="home_notice">
			<div class="home_notice_bar">
				<img src="../../assets/Home/notice.png" alt="">
				<marquee behavior="" direction="">{{pmd}}</marquee>
			</div>
			<img @click="qd" src="../../assets/Home/qian.png" alt="">
		</div>
		<img class="banner" src="../../assets/Home/banner.png" alt="">
	</div>
	
	<div class="home_bottom">
		<div class="hb_title">
			<div class="home_sign">
				
			</div>
			<div>
				矿机详情
			</div>
		</div>
		<transition name="tabbar-fold">
			<RobotItem v-if="kjlist" :kjlist="kjlist" />
		</transition>
	</div>
	
	<div v-if="!kjlist" style="text-align: center;padding-top: 2rem;">
		<van-loading size="24px">加载中...</van-loading>
	</div>
	
	<TipsPopup ref="TipsPopup"></TipsPopup>
	
  </div>
</template>

<script>
// @ is an alias to /src
//矿机列表
import RobotItem from '../../components/RobotItem.vue'
//提示
import TipsPopup from '../../components/TipsPopup.vue'
export default {
  name: 'Home',
  components: {
  	  RobotItem,
	  TipsPopup,
	  
  },
  async created(){
	  
	  try{
	  
		if(this.$store.state.kjlist){
			
			this.kjlist = this.$store.state.kjlist
			
		}else{
			
			const data = await this.$apis.Common.kjlist()
		  
			this.kjlist = data.data  
			
			this.$store.state.kjlist = data.data
			
		}
		
		const pmd = await this.$apis.User.pmd()
	  
		this.pmd = pmd.data.content
	  	
	  }catch(e){
	  	//TODO handle the exception
	  }
		
  },
  data(){
	return{
		kjlist:null,
		
		pmd:"",
		
		//是否还能签到
		qd_status:true,
		
		show:true
	}  
  },
  methods:{
	  //签到
	  async qd(){
		  
		  if(!this.qd_status){
			  
			  // this.$toast('请勿频繁签到')
			  this.$refs.TipsPopup.open({ text:"请勿频繁签到" })
			  
			  return
		  }
		  
		  this.qd_status = false
		  
		  try{
		  	
		  	const data = await this.$apis.User.qd()
		  	
		  	// this.$toast(data.msg)
			this.$refs.TipsPopup.open({
				text:data.msg,
				textType:"text",
			})
			
			setTimeout( () => {
				this.qd_status = true
			},3000)
			
		  }catch(e){
		  	
		  	// this.$toast(e.msg)
			
			this.$refs.TipsPopup.open({ text:e.msg })
			
			setTimeout( () => {
				this.qd_status = true
			},3000)
		  	
		  }
	  }
  }
}
</script>

<style lang="less" scoped>
	.home_bottom{
		
		.hb_title{
			color: #FFFFFF;
			font-size: .32rem;
			padding: .33rem 0rem .3rem .3rem;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			
			.home_sign{
				margin-right: .19rem;
				width: .05rem;
				height: .28rem;
				background-color: #1CB0D4;
				border-radius: 0.03rem;
			}
		}
	}
	
	.home_notice{
		width: 100%;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .2rem .28rem;
		box-sizing: border-box;
		
		.home_notice_bar{
			padding: 0 .6rem 0 .3rem;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 5.89rem;
			height: .5rem;
			border-radius: .23rem;
			background:rgba(148, 233, 255, .2);
		}
		
		marquee{
			width:4.5rem;
			font-size: .24rem;
			color: white;
		}
		
	}
	
	.home_top{
		height: 4rem;
		
		.banner{
			width: 100%;
		}
	}
	
	.home{
		position: absolute;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		background-color: #0F1E34;
	}
</style>